import React from 'react';
import { Dropdown as AntdDropdown } from 'antd';
import type { DropdownProps as AntdDropdownProps } from 'antd';
import { createStyles } from 'antd-style';

export interface DropdownProps extends AntdDropdownProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  dropdown: css`
    z-index: ${token.zIndexPopupBase};
  `,
}));

const DropdownComponent: React.FC<DropdownProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const dropdownClassName = cx(
    className,
    customClassName,
    styles.dropdown
  );

  return <AntdDropdown className={dropdownClassName} {...restProps} />;
};

type DropdownType = typeof DropdownComponent & {
  Button: typeof AntdDropdown.Button;
  _InternalPanelDoNotUseOrYouWillBeFired: any;
};

const Dropdown = DropdownComponent as DropdownType;
Dropdown.Button = AntdDropdown.Button;
(Dropdown as any)._InternalPanelDoNotUseOrYouWillBeFired = (AntdDropdown as any)._InternalPanelDoNotUseOrYouWillBeFired;

export { Dropdown };
export default Dropdown;

